/*
 * @Description: 
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-09-08 15:11:51
 * @LastEditTime: 2023-09-22 15:39:56
 */
/*
 * @Description: 
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-09-06 15:11:27
 * @LastEditTime: 2023-09-20 16:52:39
 */
import React, { useEffect } from "react";
import BoxCard from '@/components/BoxCard'
import SerialNumber from '@/components/SerialNumber'
import BoxSubTitle from '@/components/BoxSubTitle'
import NormalAnomaly from '@/components/NormalAnomaly'
import IndicatorPercent from '@/components/IndicatorPercent'
import SingleBarChart from '@/components/SingleBarChart'
import TypeCount from '@/components/TypeCount'
import BoxSubCard from '@/components/BoxSubCard'
import Header from '@/layouts/header'
import DateQuery from '@/components/DateQuery'
import RadioChange from '@/components/RadioChange'
import NumberBox from '@/components/NumberBox'
import RankingBar from '@/components/RankingBar'
import WaterWaves from '@/components/WaterWaves'
import { Button, Table } from "antd";
import { useRequest } from "ahooks"
import Top5 from "@/components/Top5";
import { getRank } from "@/services/contract";
import TextScroll from "@/components/TextScroll";

const Home: React.FC<any> = () => {
    const dataSource = [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号西湖区湖底公园1号',
        },
        {
            key: '2',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '3',
            name: '胡彦斌',
            age: 32,
            address: '西湖',
        }
    ];

    const columns = [
        {
            title: '排名',
            dataIndex: 'name',
            key: 'name',
            render: (_: any, __: any, index: any) => <SerialNumber value={index + 1} />
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
            render: (row: any) => <TextScroll width='150px' value={row} color='#0aebff' />
        },
    ];
    const BarData = [{
        name: '乡镇综合文化站',
        value: 426
    },
    {
        name: '社区综合文化服务中心',
        value: 326
    },
    {
        name: '村级综合文化服务中心',
        value: 226
    }]


    //循环
    const listDataRest = (res: any, flag: boolean) => {
        const data: any = [];
        res.sort((a: any, b: any) => b.value - a.value)
            .slice(0, 5)
            .map((item: any) => {
                data.push({
                    name: item.key,
                    value: flag ? ((item.value / 10000).toFixed(2)) : item.value,
                    percent: ((item.value / res[0].value) * 100).toFixed(0),
                });
            });
        return data;
    };
    const {
        data: agencyData2,
        run: AagencyDataRun2,
    } = useRequest((params) => getRank(params).then((res:any) => {
        return listDataRest(res, true);

    }), {
        manual: true,

    });

    useEffect(() => {
        AagencyDataRun2({
            dateStr: '2023',
            scope: 'YEAR',
            locationType: '',
            agencyRegionCode: '230000000000',
            columnType: 3,
            size: 5
        })
    }, [])


    return (
        <>
            <Header title="网络舆情监测" prefix={<RadioChange />} suffix={<DateQuery />} onSubmit={(values: any) => {
                console.log(values)
            }} />
            <div style={{ marginTop: 100 }} className={'flex w-full flex-nowrap gap-2.5'}>
                <div className={'w-1/3'}>
                    <Table prefixCls="dp-table" dataSource={dataSource} columns={columns} />
                    <BoxSubTitle title="信用负面事件总数" />
                    <BoxSubTitle title="国家级代表项目" value='89' color='#0AEBFF' suffix='项' />
                    <NormalAnomaly normal={1254} anomaly={658} />
                    <IndicatorPercent size='large' title="同比" value="25.4" arrow={'withBar'} />
                    <IndicatorPercent size='small' title="同比" value="-25.4" arrow={'withBar'} />
                    <IndicatorPercent size='large' title="同比" value="25.4" />
                    <IndicatorPercent title="环比" value="-21.2" />
                    <IndicatorPercent arrow value="21.2" />
                    <IndicatorPercent size='small' arrow value="-25.2" />
                    <TypeCount size='large' title="演出市场主体审批数" value="2500" color="#09BAFF" unit="家" />
                    <TypeCount size='large' title="演出市场主体审批数" value="2500" color="#09BAFF" unit="家" />
                    <TypeCount title="演出市场主体审批数" value="5151" unit="家" />

                    <TypeCount size='small' title="演出市场主体审批数" value="5151" color="#35F78D" unit="家" />

                    <BoxCard title="信用负面事件总数" style={{ height: 100, marginTop: 100 }}>
                        direction="center"
                    </BoxCard>
                    <BoxCard title="信用负面事件总数" direction='left' style={{ height: 100, marginTop: 100 }}
                        extra={<Button type="primary">查看</Button>}>
                        direction="left"
                    </BoxCard>
                    <BoxCard title="信用负面事件总数" direction='right' style={{ height: 100, marginTop: 100 }}
                        extra={<Button>查看</Button>}>
                        direction="right"
                    </BoxCard>
                </div>
                <div className={'w-1/3 '}>
                    <Top5 data={agencyData2} unit={"万元"} />
                    <div>
                        <NumberBox title={"名称"} value={123} />
                        <NumberBox size='sm' decorate title='国家动漫企业' value={123} suffix='个' />
                        <WaterWaves value={30.8} color='#00EAFF' />
                        <BoxSubCard>内容</BoxSubCard>
                    </div>
                </div>
                <div className={'w-1/3'}>
                    <div style={{ width: 924, marginTop: 100, float: 'left' }}>
                        <SingleBarChart
                            data={BarData}
                            orient='vertical'
                            formatter={(params: any) => params.value + `人`}
                        />
                        <RankingBar data={BarData} labelFormatter={
                            ((item: any) => <TypeCount size='small' title={item.name} value={item.value}
                                color="#09BAFF" />)
                        } orient='vertical' />
                        <RankingBar data={BarData} />
                    </div>

                </div>
            </div>

        </>
    )
}
export default Home